<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Fixed Scrolling</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#fixedscrolling {
    height:35em;
}

/* customized css for scrolling */
.yui-dt-scrollable  {
    width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */
    height:30em; /* SET HEIGHT HERE for ie */
}
.yui-dt-scrollbody {
    height:30em; /* SET HEIGHT HERE for non-ie */
    *height:auto; /* for ie */
}
.yui-dt-scrollable  thead {
    background:#696969; /*dark gray*/ /* ie needs a background color */
    color:#fff;
}

/* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */
/* IF ALL COLS CAN BE SAME WIDTH USE THIS:
.yui-dt-scrollable th, .yui-dt-scrollbody td {
    width:20em;
}*/
/* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/
.yui-dt-col-areacode {
    width:10em;
}
.yui-dt-col-state {
    width:20em;
}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Fixed Scrolling</h1>

<div class="exampleIntro">
	<p>Enabling fixed scrolling on a DataTable keeps the Column headers fixed as the
body of the table scrolls. Please note that this feature is not currently
compatible with Column sorting or resizeable Columns.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="fixedscrolling"></div>

<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Scrolling = new function() {
        var myColumnDefs = [
            {key:"areacode"},
            {key:"state"}
        ];

        this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["areacode","state"]
        };

        this.myDataTable = new YAHOO.widget.DataTable("fixedscrolling", myColumnDefs,
                this.myDataSource, {scrollable:true});
    };
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>